<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="../../plugins/element-ui/index.css" />
		<link rel="stylesheet" href="../../styles/common.css" />
		<link rel="stylesheet" href="../../styles/page.css" />
	</head>
	<body>
		<div class="dashboard-container" id="teacher-app">
			<div class="container">
				<!--搜索板块-->
				<div class="tableBar">
					<el-input v-model="username" placeholder="请输入老师名称" style="width: 250px;margin-right: 10px;" clearable
						@keyup.enter.native="handleQuery">
						<i slot="prefix" class="el-input__icon el-icon-search" style="cursor: pointer" @click="init"></i>
					</el-input>
					<el-select v-model="shopkeeperName" placeholder="请选择店铺" style="width: 150px;margin-right: 10px;" clearable>
						<el-option :label="item" :value="item" v-for="(item,index) in shopkeeperNameList">
							{{item}}
						</el-option>
					</el-select>
					<el-select v-model="levels" placeholder="请选择老师等级" style="width: 150px;margin-right: 10px;" clearable>
						<el-option label="初级" value="初级"></el-option>
						<el-option label="中级" value="中级"></el-option>
						<el-option label="高级" value="高级"></el-option>
					</el-select>
					<el-button type="primary" icon="el-icon-search" @click="init" style="margin-left: 10px">搜索</el-button>
					<div class="tableLab">
						<el-button type="primary" @click="addTeachertype('add','teacher')">+ 新建老师</el-button>
					</div>
				</div>
				<!--显示板块-->
				<el-table :data="tableData" stripe class="tableBox" @selection-change="">
					<el-table-column prop="username" label="老师名称" align="center"></el-table-column>
					<el-table-column prop="head" label="形象照" align="center">
						<template slot-scope="{ row }">
							<el-image style="width: auto; height: 40px; border:none;cursor: pointer;"
								:src="getImage(row.head)"
								:preview-src-list="[ `/common/download?name=${row.head}` ]">
								<div slot="error" class="image-slot">
									<img src="../../images/noImg.png" style="width: auto; height: 40px; border:none;">
								</div>
							</el-image>
						</template>
					</el-table-column>
					<el-table-column prop="experience" label="经历概述" align="center"></el-table-column>
					<el-table-column prop="levels" label="等级" align="center"></el-table-column>
					<el-table-column prop="good" label="擅长" align="center"></el-table-column>
					<el-table-column prop="tag" label="标签" align="center"></el-table-column>
					<el-table-column prop="workTime" label="工作年限" align="center"></el-table-column>
					<el-table-column prop="shopkeeperName" label="店铺名称" align="center"></el-table-column>
					<el-table-column prop="levels" label="等级" align="center"></el-table-column>
					<el-table-column label="操作" width="160" align="center">
						<template slot-scope="scope">
							<el-button type="text" size="small" class="blueBug" @click="addTeachertype(scope.row.teacherId,'teacher')"
								v-if="true">修改
							</el-button>
							<!-- <el-button type="text" size="small" class="blueBug delBut" @click="statusHandle(scope.row)">
								{{ scope.row.sysUser.status == '0' ? '启用' : '停用' }}
							</el-button> -->
							<el-button type="text" size="small" class="delBut non" @click="deleteHandle(scope.row)">删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination class="pageList" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="counts" @size-change="handleSizeChange"
					:current-page.sync="page" @current-change="handleCurrentChange"></el-pagination>
			</div>
		</div>
	</body>
	<script src="../../plugins/vue/vue.js"></script>
	<!-- 引入组件库 -->
	<script src="../../plugins/element-ui/index.js"></script>
	<!-- 引入axios -->
	<script src="../../plugins/axios/axios.min.js"></script>
	<script src="../../js/request.js"></script>
	<script src="../../api/teacher.js"></script>
	<script src="../../api/shopkeeper.js"></script>
	<script>
		new Vue({
			el: '#teacher-app',
			data() {
				return {
					counts: 0,
					page: 1,
					pageSize: 10,
					username: '',
					levels: '',
					shopkeeperName: '',
					shopkeeperId: '',
					tableData: [{
						teacherId: '',
						userId: "",
						name: "",
						levels: "",
						type: '老师',
						isDeleted: ''
					}],
					checkList: [],
					shopkeeperNameList: []
				}
			},
			computed: {},
			created() {
				this.init()
				this.getAllShopkeeperName()
			},
			mounted() {},
			methods: {
				async init() {
					const params = {
						page: this.page,
						pageSize: this.pageSize,
						username: this.username ? this.username : undefined,
						shopkeeperName: this.shopkeeperName ? this.shopkeeperName : undefined,
						levels: this.levels ? this.levels : undefined
					};
					await getTeacherPage(params).then(res => {
						if (res.code == 1) {
							this.tableData = res.data.records;
							this.counts = res.data.total;
						}
					}).catch(err => {
						this.$message.error('请求出错了：' + err)
					})
				},
				handleQuery() {
					this.page = 1;
					this.init();
				},
				//查询店铺名称
				getAllShopkeeperName() {
					getAllShopkeeperName().then(res => {
						this.shopkeeperNameList = res.data;
						// console.log(res)
					})
				},
				//状态修改
				// statusHandle(row) {
				// 	this.userId = row.userId;
				// 	this.status = row.sysUser.status;
				// 	this.$confirm('确认调整该账号的状态?', '提示', {
				// 		'confirmButtonText': '确定',
				// 		'cancelButtonText': '取消',
				// 		'type': 'warning'
				// 	}).then(() => {
				// 		enableOrDisableStatus({
				// 			'userId': this.userId,
				// 			'status': !this.status ? 1 : 0
				// 		}).then(res => { //请求结果处理
				// 			if (String(res.code) === '1') {
				// 				this.$message.success('账号状态更改成功！');
				// 				this.handleQuery()
				// 			} else {
				// 				this.$message.error(res.msg)
				// 			}
				// 		}).catch(err => {
				// 			this.$message.error('请求出错了：' + err)
				// 		})
				// 	})
				// },
				addTeachertype(st, source = 'teacher') {
					if (st === 'add') {

						const url = `page/teacher/add.html?source=${encodeURIComponent(source)}`;
						if (window.parent && typeof window.parent.safeNavigateTo === 'function') {
							window.parent.safeNavigateTo(url, '添加老师', '4');
						} else {
							// 备用方案
							window.location.href = url;
						}

					} else {
						const url = `page/teacher/update.html?userId=${st}&source=${encodeURIComponent(source)}`;
						if (window.parent && typeof window.parent.safeNavigateTo === 'function') {
							window.parent.safeNavigateTo(url, '添加老师', '4');
						} else {
							// 备用方案
							window.location.href = url;
						}
					}
				},
				deleteHandle(row) {
					console.log(row.userId)
					this.$confirm('确认删除该老师, 是否继续?', '确定删除', {
						'confirmButtonText': '确定',
						'cancelButtonText': '取消',
					}).then(() => {
						deleteTeacher(row.userId).then(res => {
							console.log(res)
							if (res.code === 1) {
								this.$message.success('删除成功！');
								isDelted = 1;
								this.handleQuery()
							} else {
								this.$message.error(res.msg || '操作失败')
							}
						}).catch(err => {
							this.$message.error('请求出错了：' + err)
						})
					})
				},
				// 获取图片
				getImage(image) {
					return $minioUrl + image
				},
				// 全部操作
				handleSelectionChange(val) {
					let checkArr = [];
					val.forEach((n) => {
						checkArr.push(n.id)
					});
					this.checkList = checkArr
				},
				handleSizeChange(val) {
					this.pageSize = val;
					this.init()
				},
				handleCurrentChange(val) {
					this.page = val;
					this.init()
				}
			}
		})
	</script>
</html>